<template>
  <div class="layout">
    <div class="helpHumanList">
      <div style="display: flex; justify-content: space-between; margin-top: 20px">
        <Breadcrumb class="breadcrumb" :crumbs="crumbs"></Breadcrumb>
        <Buttons @goBack="goBack()" :buttons="buttons"></Buttons>
      </div>
      <SearchFrame @search="searchResult" tip="擅长领域"/>
      <!-- <SelectBox @changeOption="changeOption" style="margin: 0 0 24px 0" :type="other" /> -->
      <ContainerTitle text="高端人才列表" :more="false"></ContainerTitle>
      <div v-if="talentList.length > 0" v-loading="loading">
        <div class="humanListDiv">
          <talentFrame
            v-for="(talent, index) in talentList"
            :talent="talent"
            :key="index"
            />
            <!-- :style="index == 9 ? 'border-bottom: 0' : ''" -->
        </div>
        <div id="policyPagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[12, 24, 36, 48]"
            :page-size="pageSize"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <div class="empty" v-else>
        <PublicImage :src="require('@/assets/image/empty.png')" :originalSize="true"></PublicImage>
        <p>暂无内容</p>
			</div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from "@/components/breadcrumb";
import talentFrame from "@/components/helpCom/talentFrame";
import SelectBox from "./components/talentSelectBox";
import SearchFrame from "./components/searchFrame";
//api
import { request } from "@/utils/request.js";
import config from "@/utils/config.js";

import { getTalentList } from "@/common/api/help"

export default {
  name: "talentRecommendList",
  meta: {
    name: "人才推介列表页",
  },
  components: {
    Breadcrumb,
    talentFrame,
    SelectBox,
    SearchFrame,
  },
  data() {
    return {
      buttons:[{text:"返回",type:"normal",size:"s",method:"goBack"}],
      pageNum: 1,
      pageSize: 12,
      total: null,
      education: null, //学历
      lndustryField: "", //模糊搜索
      crumbs: [
        { label: "人才服务", value: "help" },
        { label: "高端人才列表", value: "talentRecommendList", choose: true },
      ], //面包屑标题
      talentList: [],
      loading: false,
      industryFields: []
    };
  },
  mounted(){
    this.pageNum = 1
    this.getTalentRecommendList();
  },
  // activated() {
  //   this.pageNum = 1
  //   this.industryFields = JSON.parse(localStorage.getItem('industryFields'))
  //   this.$refs.headerBars.setCompanyInfo();
  //   this.$refs.headerBars.isLogin();
  //   this.getTalentRecommendList();
  // },
  methods: {
    
    /**
     * 修改筛选条件事件
     * @param e 修改后的筛选条件对象
     */
    changeOption: function (e) {
      this.education = e.tag.dictValue != undefined ? e.tag.dictValue : null;
      this.getTalentRecommendList();
    },
    // 搜索结果
    searchResult(res) {
      let value = ''
      if(res){
        this.industryFields.forEach(el => {
          if(el.dictLabel.search(res) != -1){
            value += el.dictValue + ','
          }
        });
        let arr = value.split(',')
        arr.pop()
        value = arr.join(',')
        // 查不出数据
        if(value == ''){
          value = '无'
        }
      }
      this.lndustryField = value;
      this.getTalentRecommendList();
    },
    /**
     * 返回上一页
     */
    goBack() {
      this.$router.back();
    },

    /**
     * 改变页面大小事件
     */
    handleSizeChange(e) {
      this.pageSize = e;
      this.getTalentRecommendList();
    },
    /**
     * 换页事件
     */
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getTalentRecommendList();
    },
    // 获取列表数据
    async getTalentRecommendList() {
      this.loading = true;
      let data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        lndustryField: this.lndustryField,
      };
      const { code, msg, rows, total } = await getTalentList(data)
      this.loading = false;
      if (code != "200") return this.$message.warning(msg);
      this.talentList = rows;
      // 模拟
			// this.talentList.forEach(el => {
			// 	el.lndustryField = '1,5,6,10'
			// 	el.expertType = 'A02'
      //   el.skill = '03'
			// })
			// this.talentList.forEach(el => {
			// 	if(el.skill){
			// 		el.skill = el.skill.length > 12 ? `${el.skill.substring(0,12)}...` : el.skill
			// 	}
			// 	if(el.experienceDesc){
			// 		el.experienceDesc = el.experienceDesc.length > 45 ? `${el.experienceDesc.substring(0,45)}...` : el.experienceDesc
			// 	}
			// })
      this.total = total;
    },
  },
};
</script>

<style lang="scss" scoped>
.layout {
  min-height: 100vh;
  position: relative;
  padding-bottom: 150px;
  box-sizing: border-box;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.helpHumanList {
  width: 1200px;
  margin: 0 auto;
  .empty{
    text-align: center;
    img{
      width: 312px;
      height: 185px;
      object-fit: cover;
    }
    p{
      font-size: 14px;
      color: #666;
    }
  }
}

.helpHumanList .backBtn {
  border: 1px solid #eeeeee;
  white-space: nowrap;
  font-size: 12px;
  height: 30px;
  width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}

.helpHumanList .backBtn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 5px #eeeeee;
}

.helpHumanList .title {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #045db9;
  border-bottom: 2px solid #045db9;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.humanListDiv {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  margin-bottom: 15px;
}

#policyPagination {
  text-align: right;
  margin-bottom: 30px;
}
</style>